<template>
  <div>
    <el-row :span="24">
      <el-col :span="7">
        <basic-container>
          <span>个人卡片</span>
          <div class="user">
            <div class="icon">
              <el-avatar
                v-if="isStudent"
                style="width: 100px; height: 100px"
                src="https://i.bmp.ovh/imgs/2021/09/9b1ace6b03da448f.png"
              ></el-avatar>
              <el-avatar
                v-else
                style="width: 100px; height: 100px"
                src="https://i.bmp.ovh/imgs/2021/09/17ed8a42b5d92266.png"
              ></el-avatar>
              <br />
              <span>{{ userName }}</span>
            </div>
            <div style="color: #a69da2; text-align: center">
              上次登录时间：{{ loginTime }}
            </div>
          </div>
        </basic-container>
      </el-col>
      <el-col :span="17">
        <basic-container>
          <div>
            <span>公告栏</span>
            <el-button
              type="primary"
              size="mini"
              style="float: right; margin-right: 10px"
              v-show="getPermissions('notice_add')"
              @click="addClick"
              >添加</el-button
            >
          </div>
          <div class="announcement">
            <div v-if="tableData.length == 0" class="noRecord">
              --暂无公告--
            </div>
            <div v-else v-for="item in tableData" :key="item.id">
              <div class="txt">
                <a @click="aClike(item.id)">{{ item.title }}</a>
              </div>
              <span class="time">{{ item.createTime }}</span>
            </div>
            <div class="block">
              <el-pagination
                @current-change="handleCurrentChange"
                :page-size="page.size"
                layout="total, prev, pager, next"
                :total="page.total"
              >
              </el-pagination>
            </div>
            <el-dialog
              title="公告"
              :visible.sync="dialogVisible"
              width="40%"
              :before-close="handleClose"
              :modal-append-to-body="false"
            >
              <h3 style="text-align: center">{{ content.title }}</h3>
              <p style="color: #a69da2">公告人：{{ content.teacherName }}</p>
              <p style="text-indent: 2em">{{ content.content }}</p>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>

            <el-dialog
              title="提示"
              :visible.sync="Visible"
              width="40%"
              :before-close="handleClose"
              :modal-append-to-body="false"
            >
              <el-form
                :model="ruleForm"
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
              >
                <el-row :span="24">
                  <el-col :span="12">
                    <el-form-item label="公告标题：" prop="title">
                      <el-input v-model="ruleForm.title"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="是否公布：" prop="status">
                      <el-radio-group size="small" v-model="ruleForm.status">
                        <el-radio-button label="10">否</el-radio-button>
                        <el-radio-button label="20">是</el-radio-button>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="公告内容：" prop="content">
                  <el-input
                    type="textarea"
                    rows="4"
                    v-model="ruleForm.content"
                  ></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button v-if="isadd" @click="Visible = false"
                  >取 消</el-button
                >
                <el-button
                  v-if="!isadd"
                  type="danger"
                  @click="deleteForm('ruleForm')"
                  v-show="getPermissions('notice_delete')"
                  >删除</el-button
                >
                <el-button
                  v-if="!isadd"
                  type="primary"
                  @click="updateForm('ruleForm')"
                  v-show="getPermissions('notice_update')"
                  >修改</el-button
                >
                <el-button v-else type="primary" @click="submitForm('ruleForm')"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          </div>
        </basic-container>
      </el-col>
    </el-row>

    <el-row :span="24">
      <basic-container>
        <el-col :span="24">
          <div style="height: 475px" class="task-wrapper">
            <el-tabs @click.stop="" v-model="activeName">
              <el-tab-pane name="myApproveList" v-if="!isStudent">
                <span slot="label">
                  我的待审批
                  <el-badge
                    :value="todo"
                    v-if="todo > 0"
                    size="mini"
                  ></el-badge>
                </span>
                <div v-if="approveData.length == 0" class="noRecord">
                  --暂无待审批--
                </div>
                <div v-else>
                  <div v-for="item in approveData" :key="item.id">
                    <ul>
                      <li @click="drawerOpen(item.id, item.type, item.status)">
                        <span style="float: left">{{ item.title }}</span>
                        <span style="float: right">{{ item.createTime }}</span>
                      </li>
                    </ul>
                  </div>
                  <div style="float: right">
                    <div @click.stop="More()" style="float: right">
                      <el-button size="small" type="primary">更多</el-button>
                    </div>
                    <el-pagination
                      @current-change="approveCurrentChange"
                      :page-size="approvePage.size"
                      layout="total, prev, pager, next"
                      :total="approvePage.total"
                      style="float: right"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane
                label="我的已审批"
                name="hasApprove"
                v-if="!isStudent"
              >
                <div v-if="hasApproveData.length == 0" class="noRecord">
                  --暂无已审批--
                </div>
                <div v-else>
                  <div v-for="item in hasApproveData" :key="item.id">
                    <ul>
                      <li @click="drawerOpen(item.id, item.type, item.status)">
                        <span style="float: left">{{ item.title }}</span>
                        <span style="float: right">{{ item.createTime }}</span>
                      </li>
                    </ul>
                  </div>
                  <div style="float: right">
                    <div @click.stop="More()" style="float: right">
                      <el-button size="small" type="primary">更多</el-button>
                    </div>
                    <el-pagination
                      @current-change="hasApproveCurrentChange"
                      :page-size="hasApprovePage.size"
                      layout="total, prev, pager, next"
                      :total="hasApprovePage.total"
                      style="float: right"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
              <!-- 学生页面 -->
              <el-tab-pane name="myWaitList" v-if="isStudent">
                <span slot="label">
                  我的待审批
                  <el-badge
                    :value="studentTodo"
                    v-if="studentTodo > 0"
                    size="mini"
                  ></el-badge>
                </span>
                <div v-if="myWaitListData.length == 0" class="noRecord">
                  --暂无待申请--
                </div>
                <div v-else>
                  <div v-for="item in myWaitListData" :key="item.id">
                    <ul>
                      <li @click="drawerOpen(item.id, item.type, item.status)">
                        <span style="float: left">{{ item.title }}</span>
                        <span style="float: right">{{ item.createTime }}</span>
                      </li>
                    </ul>
                  </div>
                  <div style="float: right">
                    <div @click.stop="More()" style="float: right">
                      <el-button size="small" type="primary">更多</el-button>
                    </div>
                    <el-pagination
                      @current-change="myWaitListCurrentChange"
                      :page-size="myWaitListPage.size"
                      layout="total, prev, pager, next"
                      :total="myWaitListPage.total"
                      style="float: right"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="我的申请" name="myList" v-if="isStudent">
                <div v-if="myListData.length == 0" class="noRecord">
                  --暂无申请--
                </div>
                <div v-else>
                  <div v-for="item in myListData" :key="item.id">
                    <ul>
                      <li @click="drawerOpen(item.id, item.type, item.status)">
                        <span style="float: left">{{ item.title }}</span>
                        <span style="float: right">{{ item.createTime }}</span>
                      </li>
                    </ul>
                  </div>
                  <div style="float: right">
                    <div @click.stop="More()" style="float: right">
                      <el-button size="small" type="primary">更多</el-button>
                    </div>
                    <el-pagination
                      @current-change="myListCurrentChange"
                      :page-size="myListPage.size"
                      layout="total, prev, pager, next"
                      :total="myListPage.total"
                      style="float: right"
                    >
                    </el-pagination>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <el-drawer
            :destroy-on-close="true"
            size="40%"
            title="审批过程"
            :visible.sync="drawer"
            :direction="rtl"
            :before-close="handleClose"
            append-to-body="true"
          >
            <moralEducationDrawer
              v-if="type === 10"
              :reviewId="reviewId"
              :isApprovue="isApprovue"
              :type="10"
              @close="close"
              :studentEdit="studentEdit"
            ></moralEducationDrawer>
            <jobDrawer
              v-if="type === 20"
              :reviewId="reviewId"
              :isApprovue="isApprovue"
              @close="close"
              :studentEdit="studentEdit"
            ></jobDrawer>
            <goodThingsDrawer
              v-if="type === 30"
              :reviewId="reviewId"
              :isApprovue="isApprovue"
              @close="close"
              :studentEdit="studentEdit"
            ></goodThingsDrawer>
            <publicWelfareDrawer
              v-if="type === 40"
              :reviewId="reviewId"
              :isApprovue="isApprovue"
              @close="close"
              :studentEdit="studentEdit"
            ></publicWelfareDrawer>
            <certificateDrawer
              v-if="type === 50"
              :reviewId="reviewId"
              :isApprovue="isApprovue"
              @close="close"
              :studentEdit="studentEdit"
            ></certificateDrawer>
            <innovativeDrawer
              v-if="type === 60"
              :reviewId="reviewId"
              :isApprovue="isApprovue"
              @close="close"
              :studentEdit="studentEdit"
            ></innovativeDrawer>
            <courseDrawer
              v-if="type === 70"
              :reviewId="reviewId"
              :isApprovue="isApprovue"
              @close="close"
              :studentEdit="studentEdit"
            ></courseDrawer>
            <culturalDrawer
              v-if="type === 80"
              :reviewId="reviewId"
              :isApprovue="isApprovue"
              @close="close"
              :studentEdit="studentEdit"
            ></culturalDrawer>
            <culturalTransmissDrawer
              v-if="type === 90"
              :reviewId="reviewId"
              :isApprovue="isApprovue"
              @close="close"
              :studentEdit="studentEdit"
            ></culturalTransmissDrawer>
          </el-drawer>
        </el-col>
      </basic-container>
    </el-row>
  </div>
</template>

<script>
import {
  addNotice,
  getNotice,
  deleteNotice,
  updateNotice,
  getNoticeCustomer,
  myApproveList,
  hasApprov,
  myList,
} from "@/api/wel/index";
import { getStore } from "@/util/store";
import moralEducationDrawer from "@/components/reviewDrawer/moralEducationDrawer.vue";
import goodThingsDrawer from "@/components/reviewDrawer/goodThingsDrawer.vue";
import jobDrawer from "@/components/reviewDrawer/jobDrawer.vue";
import publicWelfareDrawer from "@/components/reviewDrawer/publicWelfareDrawer.vue";
import certificateDrawer from "@/components/reviewDrawer/certificateDrawer";
import innovativeDrawer from "@/components/reviewDrawer/innovativeDrawer";
import courseDrawer from "@/components/reviewDrawer/courseDrawer";
import culturalDrawer from "@/components/reviewDrawer/culturalDrawer";
import culturalTransmissDrawer from "@/components/reviewDrawer/culturalTransmissDrawer";

export default {
  name: "wel",
  components: {
    moralEducationDrawer,
    goodThingsDrawer,
    jobDrawer,
    publicWelfareDrawer,
    certificateDrawer,
    innovativeDrawer,
    courseDrawer,
    culturalDrawer,
    culturalTransmissDrawer,
  },
  data() {
    return {
      tableData: [],
      page: {
        size: 10,
        total: 10,
      },
      approvePage: {
        size: 10,
        total: 10,
      },
      hasApprovePage: {
        size: 10,
        total: 10,
      },
      myListPage: {
        size: 10,
        total: 10,
      },
      myWaitListPage: {
        size: 10,
        total: 10,
      },
      searchForm: {
        currentPage: 1,
        pageSizes: 10,
      },
      approveForm: {
        currentPage: 1,
        pageSizes: 10,
      },
      hasApproveForm: {
        currentPage: 1,
        pageSizes: 10,
      },
      myListForm: {
        currentPage: 1,
        pageSizes: 10,
        status: "",
      },
      myWaitList: {
        currentPage: 1,
        pageSizes: 10,
        status: "10",
      },
      dialogVisible: false,
      Visible: false,
      content: {},
      userName: "",
      loginTime: "",
      isadd: false,
      ruleForm: {
        title: "",
        content: "",
        status: "",
      },
      rules: {
        title: [{ required: true, message: "标题不能为空", trigger: "blur" }],
        content: [
          { required: true, message: "公告内容不能为空", trigger: "blur" },
        ],
      },
      approveData: [],
      hasApproveData: [],
      myListData: [],
      myWaitListData: [],
      todo: "",
      studentTodo: "",
      activeName: "myApproveList",
      type: "",
      drawer: false,
      isApprovue: true,
      isStudent: "",
    };
  },
  computed: {},
  created() {
    const userName = getStore({
      name: "userName",
    });
    this.userName = userName[0];
    this.loginTime = userName[3];
    this.isStudent = userName[4];
    if (this.isStudent) {
      this.activeName = "myWaitList";
    } else {
      this.activeName = "myApproveList";
    }
    this.searchHandler();
    this.getApprove();
  },
  methods: {
    addClick() {
      this.Visible = true;
      this.isadd = true;
      this.ruleForm = {
        title: "",
        content: "",
        status: "10",
      };
    },
    drawerOpen(id, type, status) {
      this.reviewId = id;
      this.type = type;
      if (this.isStudent) {
        this.studentEdit = false;
        this.isApprovue = false;
      } else {
        this.studentEdit = true;
      }
      if (status !== 10) {
        this.isApprovue = false;
      }
      this.drawer = true;
    },
    getPermissions(value) {
      return this.getPermission(value);
    },
    updateForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateNotice(this.ruleForm).then(() => {
            this.Visible = false;
            this.$message.success("更新成功");
            this.searchHandler();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    close(data) {
      this.drawer = data;
      this.getApprove();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          addNotice(this.ruleForm).then(() => {
            this.Visible = false;
            this.$message.success("添加成功");
            this.isadd = false;
            this.searchHandler();
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteForm() {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(this.ruleForm);
        deleteNotice([this.ruleForm.id]).then(() => {
          this.Visible = false;
          this.$message.success("删除成功");
          this.searchHandler();
        });
      });
    },
    aClike(id) {
      if (this.getPermission("notice_update")) {
        this.Visible = true;
        this.tableData.forEach((res) => {
          if (id == res.id) {
            this.ruleForm = res;
            console.log(this.ruleForm);
          }
        });
      } else {
        this.dialogVisible = true;
        this.tableData.forEach((res) => {
          if (id == res.id) {
            this.content = res;
          }
        });
      }
    },
    handleCurrentChange(val) {
      this.searchForm.currentPage = val;
      this.searchHandler();
    },
    hasApproveCurrentChange(val) {
      this.hasApproveForm.currentPage = val;
      this.getApprove();
    },
    approveCurrentChange(val) {
      this.approveForm.currentPage = val;
      this.getApprove();
    },
    myListCurrentChange(val) {
      this.myListForm.currentPage = val;
      this.getApprove();
    },
    More() {
      if (this.isStudent == true) {
        this.$router.push("../studentsPage/studentsPage");
      } else {
        if (this.activeName == "myApproveList") {
          this.$router.push("../teacherPage/review");
        }
        if (this.activeName == "hasApprove") {
          this.$router.push("../teacherPage/alreadyDone");
        }
      }
    },
    getApprove() {
      if (!this.isStudent) {
        myApproveList(this.approveForm).then((res) => {
          this.approveData = res.data.records;
          this.todo = this.approveData.length;
          this.approveData.forEach((res) => {
            res.createTime = this.timeStamp2String(res.createTime);
          });
          this.approvePage.size = res.data.size;
          this.approvePage.total = res.data.total;
        });
        hasApprov(this.hasApproveForm).then((res) => {
          this.hasApproveData = res.data.records;
          this.hasApproveData.forEach((res) => {
            res.createTime = this.timeStamp2String(res.createTime);
          });
          this.hasApprovePage.size = res.data.size;
          this.hasApprovePage.total = res.data.total;
        });
      } else {
        myList(this.myListForm).then((res) => {
          this.myListData = res.data.records;
          this.myListData.forEach((res) => {
            res.createTime = this.timeStamp2String(res.createTime);
          });
          this.myListPage.size = res.data.size;
          this.myListPage.total = res.data.total;
        });
        myList(this.myWaitList).then((res) => {
          this.myWaitListData = res.data.records;
          this.studentTodo = this.myWaitListData.length;
          this.myWaitListData.forEach((res) => {
            res.createTime = this.timeStamp2String(res.createTime);
          });
          this.myWaitListPage.size = res.data.size;
          this.myWaitListPage.total = res.data.total;
        });
      }
    },
    timeStamp2String(time) {
      var datetime = new Date();
      datetime.setTime(time);
      var year = datetime.getFullYear();
      var month =
        datetime.getMonth() + 1 < 10
          ? "0" + (datetime.getMonth() + 1)
          : datetime.getMonth() + 1;
      var date =
        datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
      var hour =
        datetime.getHours() < 10
          ? "0" + datetime.getHours()
          : datetime.getHours();
      var minute =
        datetime.getMinutes() < 10
          ? "0" + datetime.getMinutes()
          : datetime.getMinutes();
      var second =
        datetime.getSeconds() < 10
          ? "0" + datetime.getSeconds()
          : datetime.getSeconds();
      return (
        year +
        "-" +
        month +
        "-" +
        date +
        " " +
        hour +
        ":" +
        minute +
        ":" +
        second
      );
    },
    searchHandler() {
      if (this.getPermission("notice_get")) {
        getNotice(this.searchForm).then((res) => {
          this.tableData = res.data.records;
          this.page.size = res.data.size;
          this.page.total = res.data.total;
        });
      } else {
        getNoticeCustomer(this.searchForm).then((res) => {
          this.tableData = res.data.records;
          this.page.size = res.data.size;
          this.page.total = res.data.total;
        });
      }
    },
    btnDelete(row) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          console.log(row);
          deleteNotice([row.id]).then(() => {
            this.$message.success("删除成功");
            this.searchHandler();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="scss">
.user {
  height: 330px;
  margin-top: 10px;
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
.icon {
  height: 280px;
  text-align: center;
  padding-top: 70px;
}
.el-calendar-table .el-calendar-day {
  height: 50px;
}
.announcement {
  height: 330px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #efefef;
  line-height: 30px;
}
.txt {
  width: 80%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  float: left;
}
.block {
  position: absolute;
  bottom: 30px;
  right: 20px;
}
.time {
  float: right;
  color: #a69da2;
  width: 15%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: right;
}
.item {
  margin-top: 10px;
  margin-right: 40px;
}
.noRecord {
  text-align: center;
  color: #a69da2;
  padding: 15px 0px;
}
.el-drawer__body {
  overflow-y: scroll !important;
}
</style>
